<!DOCTYPE html>
<html>
<head>
    <title>应用表</title>
    <#include "../../include/head-file.ftl">
</head>
<body>
<div id="form" v-cloak>
    <el-header class="ms-header ms-tr" height="50px">
        <el-button type="primary" icon="iconfont icon-baocun" size="mini" @click="save()" :loading="saveDisabled">保存
        </el-button>
        <el-button size="mini" icon="iconfont icon-fanhui" plain onclick="javascript:history.go(-1)">返回</el-button>
    </el-header>
    <el-main class="ms-container">
        <el-scrollbar class="ms-scrollbar" style="height: 100%;">
            <el-form ref="form" :model="form" :rules="rules" label-width="140px" size="mini">
                <el-row>
                    <el-col span="12">
                        <el-form-item label="站点名称" prop="websiteName">

                            <el-input v-model="form.websiteName"
                                      :disabled="false"
                                      :style="{width:  '100%'}"
                                      :clearable="true"
                                      placeholder="请输入站点名称">
                            </el-input>
                            <div class="ms-form-tip">
                                站点名称不能重复
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col span="12">
                        <el-form-item label="网站状态" prop="websiteState">

                            <el-radio-group v-model="form.websiteState">
                                <el-radio :label="0">运行</el-radio>
                                <el-radio :label="1">停止</el-radio>
                            </el-radio-group>
                            <div class="ms-form-tip">
                                可以控制网站的运行状态，如果网站已停止，预览用户会看网站暂停的相关信息。
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row
                        :gutter="0"
                        justify="start" align="top">
                    <el-col :span="12">

                        <el-form-item  label="网站生成目录" prop="websiteDir">
                            <el-input
                                    v-model="form.websiteDir"
                                    :disabled="false"
                                    :readonly="false"
                                    :style="{width:  '100%'}"
                                    :clearable="false"
                                    placeholder="请输入网站生成目录">
                            </el-input>
                            <div class="ms-form-tip">
                                application.yml中配置ms.html-dir了父目录，这里配置的是站点再父目录中生成的文件夹
                            </div>

                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    </el-col>
                </el-row>
                <el-form-item label="域名" prop="websiteUrl">

                    <el-input
                            type="textarea" :rows="5"
                            :disabled="false"
                            v-model="form.websiteUrl"
                            :style="{width: '100%'}"
                            placeholder="使用回车换行可以输入多个域名地址，必须要加http(https)://">
                    </el-input>
                    <div class="ms-form-tip">
                        必须http或https打头，多个域名回车换行保存
                    </div>
                </el-form-item>
                <el-form-item label="关键字" prop="websiteKeyword">
                    <el-input
                            type="textarea" :rows="5"
                            :disabled="false"
                            v-model="form.websiteKeyword"
                            :style="{width: '100%'}"
                            placeholder="请输入关键字">
                    </el-input>
                </el-form-item>
                <el-form-item label="描述" prop="websiteDescription">
                    <el-input
                            type="textarea" :rows="5"
                            :disabled="false"
                            v-model="form.websiteDescription"
                            :style="{width: '100%'}"
                            placeholder="请输入描述">
                    </el-input>
                </el-form-item>
                <el-form-item label="版权信息" prop="websiteCopyright">
                    <el-input
                            type="textarea" :rows="5"
                            :disabled="false"
                            v-model="form.websiteCopyright"
                            :style="{width: '100%'}"
                            placeholder="请输入版权信息">
                    </el-input>
                </el-form-item>
                <el-form-item label="每年续费日期" prop="websitePayDate">
                    <el-date-picker v-model="form.websitePayDate" :is-range="false"
                                    placeholder="请选择每年续费日期" start-placeholder=""
                                    value-format="yyyy-MM-dd"
                                    :style="{width:  '100%'}"
                                    end-placeholder="" :readonly="false"
                                    :disabled="false" :editable="true" :clearable="true"
                                    :arrow-control="true" :style="{width:''}">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="" prop="websitePay">

                    <el-input
                            type="textarea" :rows="5"
                            :disabled="false"
                            v-model="form.websitePay"
                            :style="{width: '100%'}"
                            placeholder="请输入续费清单">
                    </el-input>
                    <div class="ms-form-tip">
                        可以记录空间、域名、维护等费用明细
                    </div>
                </el-form-item>
            </el-form>
        </el-scrollbar>
    </el-main>
</div>
</body>
</html>
<script>
    var form = new Vue({
        el: '#form',
        data() {
            return {
                saveDisabled: false,
                //表单数据
                form: {
                    // 站点名称
                    websiteName: '',
                    // 网站状态
                    websiteState: false,
                    // 每年续费日期
                    websitePayDate: '',
                    // 域 名
                    websiteUrl: '',
                    // 关键字
                    websiteKeyword: '',
                    // 描述
                    websiteDescription: '',
                    // 版权信息
                    websiteCopyright: '',
                    // 续费清单
                    websitePay: '',
                    websiteState:0,
                    // 网站生成目录
                    websiteDir:'',
                },
                rules: {
                    // 站点名称
                    websiteName: [{"required": true, "message": "站点名称必须填写"},{"min":1,"max":50,"message":"站点名称长度必须为10-150"}],
                    // 网站状态
                    websiteState: [{"required": true, "message": "网站状态必须填写"}],
                    // 域名
                    websiteUrl: [{"required": true, "message": "域名必须填写"},{"min":10,"max":150,"message":"域名长度必须为10-150"}],
                    websiteDescription:[{"min":0,"max":1000,"message":"描述长度必须小于1000"}],
                    websiteKeyword:[{"min":0,"max":1000,"message":"关键字长度必须小于1000"}],
                    websiteCopyright:[{"min":0,"max":1000,"message":"版权信息长度必须小于1000"}],
                    // 网站生成目录
                    websiteDir: [
                        {"required":true,"message":"网站生成目录不能为空"},
                        {"min":0,"max":10,"message":"网站生成目录长度必须为0-10"},
                        {
                            "pattern": /^[^[!@#$"'%^&*()_+-/~?！@#￥%…&*（）——+—？》《：“‘’]+$/,
                            "message": "网站生成目录格式不匹配"
                        }
                    ],
                },

            }
        },
        watch: {},
        computed: {},
        methods: {
            save() {
                var that = this;
                var url = ms.manager + "/website/save.do";
                if(that.form.websiteId > 0) {
                    url = ms.manager + "/website/update.do";
                }
                this.$refs.form.validate((valid) => {
                    if(valid) {
                        that.saveDisabled = true;
                        var data = JSON.parse(JSON.stringify(that.form));
                        data.appLogo = JSON.stringify(data.appLogo);
                        ms.http.post(url, data).then(function(data) {
                            if(data.result) {
                                that.$notify({
                                    title: '成功',
                                    message: '保存成功',
                                    type: 'success'
                                });
                                that.saveDisabled = false;
                                location.href = ms.manager + "/website/index.do";
                            } else {
                                that.$notify({
                                    title: '失败',
                                    message: data.msg,
                                    type: 'warning'
                                });
                                that.saveDisabled = false;
                            }
                        });
                    } else {
                        return false;
                    }
                })
            },

            //获取当前应用表
            get(id) {
                var that = this;
                ms.http.get(ms.manager + "/website/"+id+"/get.do").then(function(data) {
                    if(data.data.appLogo) {
                        data.data.appLogo = JSON.parse(data.data.appLogo);
                        data.data.appLogo.forEach(function(value) {
                            value.url = ms.base + value.path
                        })
                    } else {
                        data.data.appLogo = []
                    }
                    if(data.data.websiteId) {
                        delete data.data.websiteDatetime;
                        that.form = data.data;
                    }
                }).catch(function(err) {
                    console.log(err);
                });
            },
            disabledDate(){

            },
        },
        created() {
            this.form.websiteId = ms.util.getParameter("websiteId");
            if(this.form.websiteId) {
                this.get(this.form.websiteId);
            }else{
                delete this.form.websiteId;
            }
            var that = this;
            this.rules.websiteName.push({
                validator: function (rule, value, callback) {
                    ms.http.get(ms.manager + "/website/verify.do", {
                        fieldName: "app_name",
                        fieldValue: value,
                        id: that.form.websiteId,
                        idName:'id',
                    }).then(function(res){
                        if (res.result) {
                            if (!res.data) {
                                callback("站点名称已存在！");
                            } else {
                                callback();
                            }
                        }
                    });
                },
                trigger: ['change']
            })
        }
    });
</script>
